<template>
	<view class="content">
		<u-navbar title="添加发展中会员" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>

		<view class="change_list">
			<!-- <view class="info_item">
				<view class="left">
					姓名：
				</view>
				<view class="right">
					<input type="text" placeholder="请输入姓名" v-model="name" placeholder-class="placeholder" />
				</view>
			</view> -->
			<view class="info_item">
				<view class="left">
					手机号码：
				</view>
				<view class="right">
					<input :maxlength="11" type="number" placeholder="请输入用户手机号" v-model='phone' placeholder-class="placeholder" />
				</view>
			</view>

			<!-- <view class="info_item">
				<view class="left">
					性别：
				</view>
				<view class="right">
					<u-radio-group shape="circle" activeColor="#FF594D" v-model="sex" placement="column">
						<view class="sex">
							<view class="sex_item">
								<u-radio label="男" name="1">
								</u-radio>
							</view>
							<view class="sex_item">
								<u-radio label="女" name="0">
								</u-radio>
							</view>
						</view>

					</u-radio-group>
				</view>
			</view> -->
			<!-- 	<view class="info_item" @click="birthdayClient = true">
				<view class="left">
					生日：
				</view>
				<view class="right">
					<input type="text" v-model="birthdayValue" disabled placeholder="请选择生日" placeholder-class="placeholder" />
				</view>
				<u-datetime-picker @confirm='confirmBirthday' :minDate='-631180800000' closeOnClickOverlay
					:immediateChange="true" :show="birthdayClient" :showToolbar='true' @change='getBirthdayValue'
					@cancel="birthdayClient = false" mode="date" :itemHeight='44'></u-datetime-picker>
			</view>
			<view class="info_item">
				<view class="left">
					性别：
				</view>
				<view class="right">
					<u-radio-group shape="circle" activeColor="#FF594D" v-model="enable" placement="column">
						<view class="sex">
							<view class="sex_item">
								<u-radio label="正常" name="0">
								</u-radio>
							</view>
							<view class="sex_item">
								<u-radio label="禁用" name="1">
								</u-radio>
							</view>
						</view>

					</u-radio-group>
				</view>
			</view> -->
			<!-- 			<view class="info_item">
				<view class="left">
					配偶手机号：
				</view>
				<view class="right">
					<input type="text" placeholder="请输入配偶手机号码" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="info_item">
				<view class="left">
					配偶姓名：
				</view>
				<view class="right">
					<input type="text" placeholder="请输入配偶姓名" placeholder-class="placeholder" />
				</view>
			</view> -->
		</view>
		<view class="bottom">
			<view class="left" @click="openCoupon">
				添加
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addMember,
		addfmember
	} from '../../../api/employee.js'
	export default {
		onLoad(option) {
			if (option.id) {
				this.userId = option.id
			}
		},
		data() {
			return {
				birthdayValue: '',
				birthdayClient: '',
				enable: '0',
				sex: '1',
				name: '',
				phone: '',
				userId: -1
			}
		},
		methods: {
			async newlyAddMember(data) {
				const res = await addMember(data)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						title: res.msg ?? '失败',
						icon: 'none'
					})
					return
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			async addFMember(data) {
				const res = await addfmember(data)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						title: res.msg ?? '失败',
						icon: 'none'
					})
					return
				}
				uni.showToast({
					title: res.msg,
					icon: 'none',
					success() {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			confirmBirthday(value) {
				this.birthdayClient = false
				const date = new Date(value.value)
				this.birthdayValue = date.toLocaleDateString().replaceAll('/', '-')
			},
			openCoupon() {
				// if (this.name.length == 0) {
				// 	uni.showToast({
				// 		title: '请输入姓名',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.phone.length < 11 && isNaN(this.phone)) {
					uni.showToast({
						title: '请输入11位数字手机号',
						icon: 'none'
					})
					return
				}
				this.addFMember({
					phone: this.phone,
					employeeId: this.$store.state.employeeInfo.userId
				})
				// if (this.birthdayValue.length == 0) {
				// 	uni.showToast({
				// 		title: '请输入客户生日',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// this.newlyAddMember({
				// 	userId: this.userId,
				// 	employeeId: this.$store.state.employeeInfo.userId,
				// 	employeeName: this.$store.state.employeeInfo.userName,
				// 	name: this.name,
				// 	phone: this.phone,
				// 	birthday: this.birthdayValue,
				// 	sex: this.sex,
				// 	enable: this.enable,
				// 	birthdayMonth: this.birthdayValue.split('-')[1],
				// 	memberType: 1,
				// 	"memberybDTO": {
				// 		"appId": "",
				// 		"customerInfo": {
				// 			"categoryName": "",
				// 			"number": "",
				// 			"name": "",
				// 			"phone": "",
				// 			"birthday": "",
				// 			"qq": "",
				// 			"email": "",
				// 			"address": "",
				// 			"remarks": "",
				// 			"point": 0.00,
				// 			"discount": 0.00,
				// 			"balance": 0.00,
				// 			"enable": 0,
				// 			"onAccount": 0,
				// 			"expiryDate": "",
				// 			"password": "",
				// 			"sex": 0,
				// 			"lunarBirthday": "",
				// 			"totalPoint": 0.00,
				// 			"creditLimit": 0.00,
				// 			"creditPeriod": 0.00,
				// 			"nickName": ""
				// 		}
				// 	}
				// })
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			getBirthdayValue(value) {
				// console.log((new Date(value * 1000).toDateString()));
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		height: 100vh;

		.change_list {
			padding: 20rpx;

			.info_item {
				border-radius: 10rpx;
				background-color: #fff;
				padding: 16rpx 30rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.left {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #222;
					width: 160rpx;
				}

				.right {
					input {
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #333332;
						width: 490rpx;
					}

					.sex {
						align-items: center;
						display: flex;
						padding: 10rpx 0;

						.sex_item {
							margin-right: 30rpx;
						}
					}

					.placeholder {
						color: #777;
					}
				}
			}
		}

		.bottom {
			width: 752rpx;
			height: 120rpx;
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left,
			.right {
				flex: 1;
				height: 120rpx;
				background: #FF594D;
				text-align: center;
				line-height: 120rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
			}

			.left {}

			.right {}
		}

	}
</style>